<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	template="/templates/masterLayout.xhtml">

	<ui:define name="content">
		<div class="container">
        <p>
            <font size="120%" color="red">
                                <h:messages />
            
            </font>
        </p>
        
        
		<ul class="column">
			<li><h:form id="echoForm">
				<div class="block">
				<h2><h:outputText value="Doing an echo" /></h2>
				<p />
				<h:inputText id="echoInput" value="#{testBean.text}">
					<f:ajax event="keyup" render="text" />
				</h:inputText>
				<p />
				<h:outputText id="text" value="#{testBean.text}" />
				<p />
				</div>
			</h:form></li>
			<li><h:form>
				<a4j:poll id="poll" interval="5000" render="poll,serverDate"  />
			</h:form>
			<div class="block">
			<h2><h:outputText id="pollOutputText" value="Polling Server for Date every 5 secs" /></h2>
			<h:form id="pollForm">
				Server Date: 
				<h:outputText id="serverDate"
					value="#{testBean.currrentTime}" />
			</h:form></div>
			</li>
			<li>
			<div class="block">
			<h2><h:outputText value="EL2.0 method invocations" /></h2>
			<p />
			<h:outputText id="elText" value="#{testBean.sayHi('Java Momentum')}" />
			<p />
			</div>
			</li>
			<li>
			<div class="block">
			<h2>Ajax status monitor</h2>
			<a4j:status id="status"> 
				<f:facet name="start">
						Start
					</f:facet>
				<f:facet name="stop">
						Stop
					</f:facet>
			</a4j:status></div>
			</li>
			
			<li>
			<div class="block">
			<h2>Spring Security</h2>
			<p>Log in with user:user or admin:admin.</p>
			<h:panelGroup rendered="#{empty authBean.currentUser}">
				<h3>Login</h3>
				<h:form prependId="false">
					<h:panelGrid columns="2">
						<h:outputLabel for="j_username" value="Username" />
						<h:inputText id="j_username" size="10" maxlength="10" />

						<h:outputLabel for="j_password" value="Password" />
						<h:inputSecret id="j_password" size="10" maxlength="10" />

						<h:commandButton action="#{authBean.login}" value="Log in" id="loginButton" />
					</h:panelGrid>
				</h:form>
			</h:panelGroup>
			<h:panelGroup id="logoutPanel" rendered="#{not empty authBean.currentUser}">
				<h3>Logged in as: #{authBean.currentUser.username}</h3>
				<p>You have following rights:</p>
				<h:outputText id="rolesText" value="#{authBean.currentUser.authorities}" />
				<h:form id="logoutForm">
					<h:commandButton action="#{authBean.logout}" value="Logout"
						immediate="true" id="logoutButton"/>
				</h:form>
			</h:panelGroup >
			</div>
			</li>
			<li>
			<div class="block">
			 <p>Password is ...
			 <h:outputText value="#{authBean.adminPassword}" /> </p>
			 <h:form>
                <h:commandLink
                    value="Admin only: click this to see the super secret hidden password..."
                    action="#{authBean.fetchAdminPassword}" />
             </h:form>
             
             <h:panelGroup rendered="#{not empty authBean.currentUser}">
                <h:panelGroup rendered="#{authBean.userInRole('ROLE_ADMIN')}">
                    <p>You are an admin.</p>
                </h:panelGroup>
                <h:panelGroup rendered="#{authBean.userInRole('ROLE_USER')}">
                    <p>You are a user.</p>
                </h:panelGroup>
            </h:panelGroup>
			</div>
			</li>

			<li>
			<div class="block">two</div>
			</li>
			<li>
			<div class="block">two</div>
			</li>
			<!--end repeating list item-->
		</ul>
		</div>
	</ui:define>
</ui:composition>